<template>
	<view class="container">
		<image class="img_bj" src="@/static/images/shop/topup_img.png" mode=""></image>
		<view class="pop_up" v-if="!voltar">
			<view class="title_top">
				<view class="title_text">Deposito</view>
				<view class="back" @click="clickBack">
					<up-icon name="close" color="#fff" size="14"></up-icon>
				</view>
			</view>
			<view class="money_tip">Valor a ser depositado：</view>
			<view class="search">
				<up-input placeholder="Quantia (BRL)" border="none" v-model="money" :customStyle="inputStyle" color="#fff">
					<template #prefix>
						<view class="unit">R$</view>
					</template>
					<template #suffix>
						<view class="input_btn">
							<view class="i_btn" @click="calculate(1)">
								<up-button color="#19191f">
									<up-icon name="minus" color="#3D3D3D" size="16"></up-icon>
								</up-button>
							</view>
							<view class="i_btn" @click="calculate(2)">
								<up-button color="#19191f">
									<up-icon name="plus" color="#3D3D3D" size="16"></up-icon>
								</up-button>
							</view>
						</view>
					</template>
				</up-input>
			</view>
			<view class="money_list">
				<up-scroll-list :indicator="false">
					<view class="money_s">
						<view class="money_i" :class="{ money_active: money_i == index }" v-for="(item, index) in moneyList" @click="clickMoney(index)" :key="index">
							R$ {{ item.num }}
						</view>
					</view>
				</up-scroll-list>
			</view>
			<view class="select">
				<up-checkbox
					inactiveColor="rgba(47, 208, 128, 0.302)"
					:customStyle="{ marginBottom: '8px' }"
					label="Nao quero receber nenhum bonus"
					labelColor="#7E84A0"
					activeColor="#4FAA71"
					name="agree"
					usedAlone
					v-model:checked="aloneChecked"
				></up-checkbox>
			</view>
			<view class="search2">
				<up-input placeholder="Codigo do bonus" border="none" :customStyle="inputStyle2" color="#fff">
					<template #prefix>
						<view class="unit2">
							<image class="input_icon" src="@/static/images/shop/input_icon.png" mode=""></image>
						</view>
					</template>
					<template #suffix>
						<view class="input_btn2">
							<up-button color="#474A5C" :customStyle="btnStyle2" v-if="!isloding" @click="validar" text="Validar"></up-button>
							<up-loading-icon mode="circle" timing-function="linear" inactiveColor="rgba(47, 208, 128, 0.3)" color="#4FAA71" v-else></up-loading-icon>
						</view>
					</template>
				</up-input>
			</view>

			<view class="btns">
				<up-button color="#454757" :customStyle="btnStyle" @click="clickBtn(1)">
					<image class="btn_icon" src="@/static/images/shop/back_icon.png" mode=""></image>
					<view class="btn_text">Voltar</view>
				</up-button>
				<up-button color="#0ACF83" :customStyle="btnStyle" @click="clickBtn(2)">
					<image class="btn_icon" src="@/static/images/search/btn_img.png" mode=""></image>
					<view class="btn_text">DEPOSITAR</view>
				</up-button>
			</view>
		</view>
		<vpltar v-else></vpltar>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, provide, inject } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

import vpltar from './components/voltar.vue';

const btnStyle = {
	height: '88rpx',
	borderRadius: '20rpx',
	fontSize: '32rpx',
	color: '#333',
	fontWeight: 700,
	width: '300rpx'
};
const btnStyle2 = {
	height: '48rpx',
	borderRadius: '6rpx',
	fontSize: '32rpx',
	color: '#7E84A0',
	fontWeight: 700,
	width: '138rpx'
};
const inputStyle = {
	height: '78rpx',
	borderRadius: '12rpx',
	background: 'rgba(2, 2, 3, 0.5)'
};
const money = ref('');
const isloding = ref(false);
const money_i = ref(null);
const aloneChecked = ref(false);
const moneyList = ref([{ num: '10.00' }, { num: '50.00' }, { num: '100.00' }, { num: '200.00' }, { num: '500.00' }]);
const voltar = ref(false);

const inputStyle2 = {
	height: '88rpx',
	borderRadius: '12rpx',
	background: '#242632'
};

const setInde = () => {
	voltar.value = !voltar.value;
};

provide('setInde', setInde);

onMounted(() => {});

const clickBack = () => {
	uni.navigateBack();
};

const clickBtn = (num) => {
	if (num == 2) {
		voltar.value = true;
	}
};

const clickMoney = (index) => {
	money_i.value = index;
	money.value = moneyList.value[index].num;
};

const calculate = (i) => {
	let newMoney = money.value.split('.');
	if (i == 1) {
		if (newMoney[0] > 1) {
			newMoney[0]--;
			money.value = newMoney[0] + '.' + newMoney[1];
		}
	} else {
		if (newMoney[0]) {
			newMoney[0]++;
			money.value = newMoney[0] + '.' + newMoney[1];
		}
	}
};

const validar = () => {
	isloding.value = true;
	setTimeout(() => {
		isloding.value = false;
	}, 2000);
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	width: 100vw;
	letter-spacing: 0.4rpx;
	.img_bj {
		width: 100vw;
		height: 368rpx;
		display: block;
	}
	.pop_up {
		padding: 42rpx 0 0 32rpx;
		.title_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			line-height: 40rpx;
			padding-right: 84rpx;
			font-weight: 700;
			.back {
				width: 56rpx;
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #020203;
				border-radius: 12rpx;
			}
		}
		.money_tip {
			font-size: 24rpx;
			line-height: 40rpx;
			margin-top: 30rpx;
		}
		.search {
			padding-right: 84rpx;
			margin-top: 30rpx;
			.unit {
				margin: 0 20rpx;
			}
			.input_btn {
				display: flex;
				align-items: center;
				margin-right: 6rpx;
				.i_btn {
					width: 62rpx;
					height: 62rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4px 0px 0px 4px;
					&:last-child {
						border-radius: 0px 4px 4px 0px;
						border-left: 2rpx solid #3d3d3d;
					}
				}
			}
		}
		.money_list {
			margin-top: 30rpx;
			.money_s {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				font-size: 24rpx;
				line-height: 40rpx;
				.money_i {
					padding: 0 60rpx;
					height: 80rpx;
					text-wrap: nowrap;
					display: flex;
					align-items: center;
					border: 2rpx solid #454757;
					border-radius: 12rpx;
					background-color: #242631;
					margin-right: 12rpx;
				}
				.money_active {
					background-color: #454757;
				}
			}
		}
		.select {
			margin-top: 30rpx;
			color: #7e84a0;
			font-size: 24rpx;
			line-height: 40rpx;
		}
		.search2 {
			padding-right: 84rpx;
			margin-top: 30rpx;
			.unit2 {
				margin: 0 20rpx;
				.input_icon {
					height: 48rpx;
					width: 48rpx;
					display: block;
				}
			}
			.input_btn2 {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
		}
		.btns {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 84rpx;
			box-sizing: border-box;

			.btn_icon {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin-right: 20rpx;
			}
			.btn_text {
				font-size: 32rpx;
				line-height: 40rpx;
				color: #fff;
			}
		}
	}
}
</style>
